<template>
  <div style="max-width: 600px; display: flex; justify-content: space-between;">
    <div>
       
        <el-card style="width: 500px;">
            <template #header>
                <div class="card-header">
                    <span>第一步:单击行选择商品</span>
                </div>
            </template>
            <div>
    <el-form :model="form" label-width="auto" >
        <el-row :gutter="20" style="width: 700px;">
            <el-col :span="6"><div class="grid-content ep-bg-purple" />
                <el-form-item label="商品">
                <el-input v-model="form.name" />
                </el-form-item>
            </el-col>
            <el-col :span="6" style="width: 700px;"><div class="grid-content ep-bg-purple" />
                <el-form-item label="类别：">
            <el-cascader style="width:300px" v-model="categoryId" @change="show" :options="data" :props="props1"
            :show-all-levels="false" clearable />
        </el-form-item>
            </el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" />
                <el-form-item>
                <el-button type="primary" @click="getTableData">查询</el-button>
                </el-form-item>
            </el-col>
        </el-row>
  </el-form>
            </div>
            <div>
   <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">
    <el-table-column label="#" width="55">
    <template v-slot="scope">
      {{ scope.$index + 1 }}  <!-- 自增数字，从1开始 -->
    </template>
  </el-table-column>
    <el-table-column  prop="bar_code" label="条码" />
    <el-table-column  prop="product_name" label="名称" />
    <el-table-column  prop="standard" label="规格" />
    <el-table-column  prop="model" label="型号" />
    <el-table-column  prop="name" label="类别" />
    <el-table-column  prop="unit" label="单位" />
  </el-table>
  
            </div> 

            <template #footer>

                <el-pagination
      v-model:current-page="form.PageIndex"
      v-model:page-size="form.PageSize"
      :page-sizes="[100, 200, 300, 400]"
      :background="true"
      next-text="下一页"
      prev-text="上一页"
      
      layout="prev, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
            </template>
        </el-card>
    </div>
    <div>
      
        <el-card style="width: 500px;margin-left: 20px;">
            <template #header>
                <div class="card-header">
                    <span>第二步:为选中的商品设置物料</span>
                </div>
            </template>
            <el-form :model="form" label-width="auto" >
        <el-row :gutter="20" style="width: 800px;">
            <el-col :span="6"><div class="grid-content ep-bg-purple" />
                <el-form-item label="商品编号">
                <el-input v-model="name" />
                </el-form-item>
            </el-col>
            <el-col :span="6" style="width: 800px;"><div class="grid-content ep-bg-purple" />
                <el-form-item label="商品类别：">
                  <el-input v-model="productname" />
            
        </el-form-item>
            </el-col>
         
          
        </el-row>
  </el-form>
         <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="1.所需物料" name="first">
                  <MaterialNeedView :key="refreshKey" />
                </el-tab-pane>
             
              </el-tabs>
            <template #footer></template>
        </el-card>
    </div>
</div>
    
</template>
<script lang="ts" setup>
    import { reactive, ref,onMounted } from 'vue'
    import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
    import { useRouter, useRoute } from 'vue-router'
    import type { TabsPaneContext } from 'element-plus'
  
    import MaterialNeedView from '@/views/ProductionManagement/MaterialNeedView.vue'
    import {GetProductionBow,GetMaterialNeedById} from '@/api/production/index'
    import{GetMaterialCategoryTree} from '@/api/category/index'
    import {type productionBom,type MaterialNeedData} from '@/api/production/type'
    import axios from 'axios'
    const route = useRoute()
    const router = useRouter()
const form=ref<productionBom>({
    name:'',
    categoryid:null,
    PageIndex:1,
    PageSize:10

})
const form1=ref<MaterialNeedData>({
    productid:null,
    PageIndex:1,
    PageSize:10

})
const props1 = {
  checkStrictly: true,
}
onMounted(()=>{
    getData()
    getTableData()
    show()
    
   
})
const refreshKey=ref(0)
const categoryId = ref([])
const show = () => {

  if (categoryId.value != null) {
    form.value.categoryid = categoryId.value[categoryId.value.length - 1]
    console.log(form.value.categoryid);
   
    
  } else {
    form.value.categoryid = null
  }
 
}
const data = ref([])
const getData = async () => {
  await GetMaterialCategoryTree().then(function (res) {
    console.log(res.data);
    
    data.value = res.data
  })
}
const tableData = ref([])
const getTableData = async () => {
 
  await GetProductionBow(form.value)
    .then(res => {
      console.log(res.data.data)
      tableData.value = res.data.data
    })
}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  form.value.PageSize=val;
  getTableData()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  form.value.PageIndex=val;
  getTableData()
}
const handleRowClick = (row: any) => {
  console.log(row.productid);
  
  // 使用 sessionStorage 存储
  localStorage.setItem("zhuProductionid", row.productid);
  console.log("Product ID saved to sessionStorage:", row.productid);

  form1.value.productid = row.productid;

  // 调用获取物料数据的函数
  GetMaterialNeedData()
    .then(() => {
      console.log("Material data fetched successfully.");
    })
    .catch((error) => {
      console.error("Error fetching material data:", error);
    });

  // 更新刷新键
  refreshKey.value += 1;
}
const name=ref()
const productname=ref()
const GetMaterialNeedData=async()=>{
  await GetMaterialNeedById(form1.value).then(function(res){
      console.log(res.data.data);
      name.value=res.data.data[0].productid
      productname.value=res.data.data[0].name
      
  })
} 
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

</script>